<!--新手指南-->
<template>
  <list class="all bg1">
    <refresh :display="isRefresh ? 'show' : 'hide'" @refresh="httpGuide">
      <loading-indicator class="load text1"></loading-indicator>
    </refresh>

    <!--内容-->
    <cell v-for="(item, index) in titles" v-bind:key="index">
    
      <VGuide v-if="datas[item.key] && datas[item.key].length"
        v-model="item.open" 
        :title="item.title" 
        :datas="datas[item.key]"
        @info="infoClick"></VGuide>
      <div class="height20" v-if="index == datas.length-1"></div>
    </cell>
  </list>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.load {
  height: 40px;
  width: 40px;

  margin-top: 20px;
  margin-left: 355px;
}
</style>

<script>

//组件
import VGuide from '@/square/view/VGuide.vue' 

//功能
import jhttps from "@/_js/https";
import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";


import I18N from "@/_i18n/i18n";
var T = I18N.t;
export default {

  components: {
    VGuide,
  },

  data() {
    return {
      T:T,
      isRefresh:false, //显示刷新
      
      titles:[{'key':'USE',   'title':T('Vtrading使用教程'), 'open':true},
              {'key':'PARAM', 'title':T('策略参数说明'), 'open':true},
              {'key':'API',   'title':T('API申请和使用'), 'open':true},
              {'key':'OTHER', 'title':T('其它'), 'open':true}],
      datas:{},
    };
  },

  created() {
    this.httpGuide();
  },

  methods: {

    initData(datas) {

      var dict = {};
      for (let index = 0; index < datas.length; index++) {
        var map = datas[index];
        var array = dict[map.type];
        if (array == undefined) {
          array = [];
          dict[map.type] = array;
        }
        array.push(map);
      }
      return dict;
    },

    /********************************* HTTP*/
    //http新手指南-刷新
    httpGuide() {
      if (this.isRefresh) return;
      this.isRefresh = true;
      var param = {};
      jhttps.post("billboard/queryNewbieGuideList",param,true,(data) => {
        this.isRefresh = false;
        if (data.status == 200) {
          var data = data.data;
          this.datas = this.initData(data);
        } else {
          jmodal.toast(data.msg);
        }
      });
    },
    
    /********************************* 点击*/
    //详情
    infoClick(item){
      jnavigator.openNative('guideInfo', {'id':item.id});
    },
  },
};
</script>
